<div class="advsAndSocailArea">
    <div class="advsMed"><img src="<?php bloginfo('template_url'); ?>/images/advs2.jpg" alt="" /></div>

    <h2> تابعنا على </h2>
    <span class="socialMedia_SB clearfix">
        <a href="#" target="_blank" class="faceBook_SB" title="Facebook"></a>
        <a href="#" target="_blank" class="twitter_SB" title="Twitter"></a>
        <a href="#" target="_blank" class="youtube_SB" title="Youtube"></a>
        <a href="#" target="_blank" class="rss_SB" title="RSS"></a>
        <a href="#" target="_blank" class="email_SB" title="Email"></a>
    </span><!-- socailMediaSide -->

    <form action="" method="get" class="clearfix">
        <input type="text" name="email" value="البريد الإلكترونى" onblur="if (this.value == '') {
                    this.value = 'البريد الإلكترونى'
                }" onfocus="if (this.value == 'البريد الإلكترونى') {
                            this.value = ''
                        }" />
        <input type="submit" value="مشاركة" />
    </form>
</div><!-- advsAndSocailArea -->

<div class="socialAndVideosArea">
    <span class="topSocialAndVideos">آخر الأخبار على مواقع التواصل الاجتماعى</span>
    <div class="scroll-pane">
        <div class="LastOnSocialArea">
            <h2 id="onSocailTitle"> آخر الأخبار على مواقع التواصل الاجتماعى </h2>
            <?php
            $socialId = get_cat_ID('social media');
            $args = array('category' => $socialId, 'numberposts' => 6);
            $innerPosts = get_posts($args);
            foreach ($innerPosts as $post) {
                ?>
                <div class="lastOnSocial clearfix">
                    <h3><a href="<?php echo $link = get_permalink($post->ID) ?>"> <?php echo $post->post_title; ?> </a></h3>
                    <div class="lastOnSocialShares">
                        <?php $meta = get_post_meta($post->ID); ?> 
                        <span class="LOS_gplus" onclick="<?php  echo $meta['gplus'][0]; ?>">
                            <span class="LOSImg"></span>
                            <span class="LOSSharePrecentage"></span>
                        </span><!-- LOS_gplus -->
                        <span class="LOS_twitter" onclick="<?php echo $meta['twitter'][0]; ?>">
                            <span class="LOSTwitterLogo LOSImg"></span>
                            <span class="LOSSharePrecentage"></span>
                        </span><!-- LOS_gplus -->
                        <span class="LOS_facebook" onclick="<?php echo $meta['facebook'][0]; ?>">
                            <span class="LOSFacebbokLogo LOSImg"></span>
                            <span class="LOSSharePrecentage"></span>
                        </span><!-- LOS_gplus -->
                    </div><!-- lastOnSocailShares -->
                    <span class="lastSocialImg"><a href="<?php echo $link ?>"><?php echo get_the_post_thumbnail($post->ID); ?></a></span>

                    <div class="lastOnSocialDetails clearfix">
                        <!-- for other socials ( thisSocialFromFacebook , thisSocialFromGPlus ) -->
                        <span class="thisSocialFrom"><?php echo $meta['source'][0]; ?></span>
                        <?php $cat = getColorClassName($post); ?>
                        <h4 class="<?php echo 'c' . $cat->slug ?>"><a href="?cat=<?php echo $cat->term_id ?>"> <?php echo $cat->name ?> </a></h4>
                    </div><!-- lastOnSocialDetails -->

                </div><!-- lastOnSocial -->
                <span class="horizontalLine"></span>
            <?php } ?>

        </div><!-- LastOnSocialArea -->
        <h2 id="LatestVideosTitle">أحدث الفيديوهات و الصور</h2>
		<?php
            $videoId = get_cat_ID('videos');
			$galleriesId = get_cat_ID('album');
            $args = array('category' =>  ''.$videoId.','.$galleriesId.'', 'numberposts' => 12 ,'orderby' => 'rand', );
            $innerPosts = get_posts($args);
			$isGallery= false ; $counter = 0; 
            foreach ($innerPosts as $post) { 
			if ( has_shortcode( $post->post_content, 'gallery' ) ) { $isGallery= true; }else {$isGallery = false;} 
         ?> 
          <?php if ( $counter % 4 == 0 ) { ?>
        <div class="latestVideos clearfix">
        
        
            <a href="<?php echo $videolink = get_permalink( $post->ID );?>" class="LVlarge">
                <?php the_post_thumbnail('medium'); ?>
                <?php if ($isGallery) { ?> 
                <span class="GalleryPlayerIcon"></span>
                <?php } else { ?> 
                <span class="videoPlayerIcon"></span>
                <?php } ?>
                <span class="LVDetails">
                
                    <span class="timePostIcon"></span>
                    <span><?php echo $post->post_date ?></span>
                    <span class="LVbigTitle"><?php echo substr($post->post_title, 0 , 60) ;?></span>
                </span><!-- LVDetails -->
            </a>
         
        </div><!-- latestVideos -->
		<?php  } else {?> 
        <div class="latestVideos clearfix">
            <a href="<?php echo $videolink = get_permalink( $post->ID );?>" class="LVsmall">
                <?php the_post_thumbnail('small'); ?>
               <?php if ($isGallery) { ?> 
                <span class="GalleryPlayerIcon"></span>
                <?php } else { ?> 
                <span class="videoPlayerIcon"></span>
                <?php } ?>
            </a>
            <div class="LVsmallDetails">
                <h3><a href="<?php echo $videolink ?>"><?php echo substr($post->post_title, 0 , 100) ;?></a></h3>
                <span class="timePostIcon"></span>
                <span><?php echo $post->post_date ?></span>
            </div>
        </div><!-- latestVideos -->
        <?php  }$counter++; } ?>
		
       
    </div><!-- scroll-pane -->
</div><!-- socialAndVideosArea -->

<div class="homeBlog relative" >
    <a href="#" class="reloadBlogs" style="display:none">
        <span class="reloadBlogsIcon"></span>
        <span> حمل من جديد </span>
    </a>
    <h2> المقالات الاكثر انتشارا </h2>

    <div class="homeBlogsContent">
		<?php
			$articlsId = get_cat_ID('article'); 
            $query = new WP_Query(array('cat' => $articlsId, 'numberposts' => 5, 'meta_key' => '_count-views_all', 'orderby' => 'meta_value_num'));
            while ($query->have_posts()) {
                $query->the_post();
				$post_id = get_the_ID();
                $colorCategory = getColorClassName($post_id);
                $colorClassName = 'c' . $colorCategory->slug;
                $meta_values = get_post_meta($post_id, '_count-views_all', TRUE);
                ?>
                <div class="homeBlogArea clearfix">
                	<span class="homeBlogImage"><?php echo get_the_post_thumbnail ($post_id, 'thumbnail');?></span>
                    <h3><a href="<?php the_permalink(); ?>"><?php echo  substr(get_the_title(),0,60); ?></a></h3> 
                    <?php $meta = get_post_meta($post_id); ?> 
                    <div class="postShares">
                        <span class="gPlusShares"></span>
                        <span><?php  echo $meta['gplus'][0]; ?></span>
                        <span class="twitterShares"></span>
                        <span><?php  echo $meta['twitter'][0]; ?></span>
                        <span class="facebookShares"></span>
                        <span><?php  echo $meta['facebook'][0]; ?></span>
                    </div>
                    <span class="blogViews <?php echo $colorClassName; ?>"><?php echo $meta_values; ?></span>   
                </div><!-- homeBlogArea -->
                <?php
            }
            wp_reset_postdata();
        ?>
    </div><!-- homeBlogsContent -->
</div><!-- homeBlog -->